<template>
  <div class="commentList">
    <div class="formGroup">
      <label>评论人：</label>
      <input type="text" v-model="commenter" placeholder="请输入昵称" />
    </div>
    <div class="formGroup">
      <label>评论内容：</label>
      <input type="text" v-model="content" placeholder="请输入评论内容" />
    </div>
    <div class="formGroup">
      <button @click="submitComment">发表评论</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commenter: "",
      content: "",
    };
  },
  methods: {
    submitComment() {
      if (!this.commenter || !this.content) {
        alert("请填写完整信息！");
        return;
      }
      this.$emit("addComment", {
        commenter: this.commenter,
        content: this.content,
      });
      this.commenter = "";
      this.content = "";
    },
  },
};
</script>

<style scoped>
.commentList {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.formGroup {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  padding: 8px 15px;
  background: green;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>